import { defineStore } from 'pinia'
import { store } from '../index'
import { isDark } from '@/components/Theme/index'
import { useCssVar } from '@vueuse/core'
const bgColor = useCssVar('--pb-active-bg-color', null,)
export interface SettingState {
  theme: string
  isCollapse: boolean
  isCeiling: boolean
  isShowCard: boolean
  settingDrawer: boolean
  mainColorTone: string
  routingMode: string
}
export const settingStore = defineStore('setting', {
  state: (): SettingState => {
    return {
      theme: isDark.value ? 'dark' : 'light',// 主题模式
      isCollapse: false,// 左侧菜单是否展开
      isCeiling: true, // 是否吸顶
      isShowCard: true, // 是否显示选项卡
      settingDrawer: false, // 展开设置功能
      mainColorTone: bgColor.value, // 导航主色调
      routingMode: localStorage.getItem('routingMode') || 'back-end' // 动态路由模式
    }
  },
  getters: {
    getAll(): SettingState {
      return {
        theme: this.theme,// 主体模式
        isCollapse: this.isCollapse,// 左侧菜单是否展开
        isCeiling: this.isCeiling,// 是否吸顶
        isShowCard: this.isShowCard,// 是否吸顶
        settingDrawer: this.settingDrawer, // 展开设置功能
        mainColorTone: this.mainColorTone, // 导航主色调
        routingMode: this.routingMode, // 动态路由模式
      }
    },

    getTheme(): string {
      return this.theme
    },

    getIsCollapse(): boolean {
      return this.isCollapse
    },
    getIsCeiling(): boolean {
      return this.isCeiling
    },
    getIsShowCard(): boolean {
      return this.isShowCard
    },
    getSettingDrawer(): boolean {
      return this.settingDrawer
    },
    getRoutingMode(): string {
      return this.routingMode
    },
  },
  actions: {
    setTheme(theme: string) {
      this.theme = theme
    },
    setIsCollapse(isCollapse: boolean) {
      this.isCollapse = isCollapse
    },
    setIsCeiling(isCeiling: boolean) {
      this.isCeiling = isCeiling
    },
    setIsShowCard(isShowCard: boolean) {
      this.isShowCard = isShowCard
    },
    setSettingDrawer(settingDrawer: boolean) {
      this.settingDrawer = settingDrawer
    },
    setMainColorTone(mainColorTone: string) {
      this.mainColorTone = mainColorTone
      bgColor.value = mainColorTone
    },
    setRoutingMode(routingMode: string) {
      this.routingMode = routingMode
      localStorage.setItem('routingMode', routingMode)
    },
  }
})

export const settingStoreWithOut = () => {
  return settingStore(store)
}
